<template>
  <div
    style="
      display: flex;
      background: #fff;
      height: 80px;
      padding: 10px;
      border-bottom: #eee 1px solid;
    "
    v-if="props.status === 1 ? true : false"
  >
    <div class="inp">
      <el-date-picker v-model="search.year" type="month" placeholder="年" style="width: 150px" />
    </div>
    <div class="inp">
      <el-select v-model="search.model" clearable placeholder="类型选则" style="width: 150px">
        <el-option
          v-for="item in model"
          :key="item.id"
          :label="item.label"
          :value="item.id"
          style="width: 150px"
        />
      </el-select>
    </div>
    <div class="inp">
      <el-select v-model="search.type" clearable placeholder="类型选则" style="width: 150px">
        <el-option
          v-for="item in props.typeList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
          style="width: 150px"
        />
      </el-select>
    </div>
    <div class="inp" style="display: flex">
      <el-input placeholder="请输入关键字" v-model="search.keyword" style="height: 30px"></el-input>
      <el-button
        :icon="Search"
        type="danger"
        plain
        style="margin-left: 10px; height: 30px"
        @click="searchBlog"
        >搜索</el-button
      >
      <el-button :icon="Refresh" type="primary" @click="reset" plain>重置</el-button>
      <el-button :icon="Switch" plain @click="refresh">刷新</el-button>
    </div>
  </div>
  <div style="width: 100%; margin-top: 20px; background: #fff; padding: 10px 0">
    <div v-if="props.dataList?.length <= 0 || props.dataList === null ? true : false">
      <el-empty :image-size="200" />
    </div>
    <div v-for="item of props.dataList" :key="item.id" class="item">
      <div>
        <img :src="item.firstPicture" alt="" style="width: 180px; height: 100px" />
      </div>
      <div class="left">
        <div style="display: flex; width: 100%; justify-content: space-between; height: 30px">
          <div style="font-size: 18px">{{ titleUtil.title(item.title) }}</div>
          <div style="color: #b6b6b6">{{ titleUtil.formatDate(item.createTime) }}</div>
        </div>
        <div style="height: 55px">
          <div class="tag1 tag" v-if="item.model === 0">
            {{ titleUtil.model(item.model) }}
          </div>
          <div class="tag2 tag" v-if="item.model === 1">
            {{ titleUtil.model(item.model) }}
          </div>
          <div class="tag3 tag" v-if="item.model === 2">
            {{ titleUtil.model(item.model) }}
          </div>
        </div>
        <div style="display: flex; width: 100%; justify-content: space-between">
          <div style="display: flex">
            <div class="foot">
              展现量
              <div>{{ titleUtil.numberTo(item.historyPeopleCount) }}</div>
            </div>
            <div class="foot">
              点赞
              <div>{{ titleUtil.numberTo(item.like) }}</div>
            </div>
            <div class="foot">
              收藏
              <div>{{ titleUtil.numberTo(item.collect) }}</div>
            </div>
          </div>
          <div style="display: flex">
            <div v-if="props.status === 1 ? true : false">
              <button class="btn" @click="toPush(item)">
                <Edit style="width: 1em; height: 1em; margin-right: 2px" />编辑
              </button>
            </div>
            <button class="btn" @click="toDetail(item)">
              <View style="width: 1em; height: 1em" /> 浏览
            </button>
            <button class="btn" @click.stop="del(props.status, item.id)">
              <Delete style="width: 1em; height: 1em; margin-right: 2px" />删除
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <ConfirmDia ref="confirmDia" @delete="handlerDelete"></ConfirmDia>
</template>

<script setup>
import titleUtil from '@/util/titleUtil'
import { Search, Refresh, Switch } from '@element-plus/icons'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import ConfirmDia from './ConfirmDia.vue'
import store from '@/store'
import request from '@/util/request'
import { ElNotification } from 'element-plus'

const props = defineProps({
  dataList: {
    type: Array,
    default: null
  },
  typeList: {
    type: Array,
    default: null
  },
  status: {
    type: Number,
    default: 1
  }
})
const confirmDia = ref()
const router = useRouter()
const emit = defineEmits(['refresh', 'search'])

const model = ref([
  { id: 99, label: '不限类型' },
  { id: 0, label: '原创' },
  { id: 1, label: '转载' },
  { id: 2, label: '翻译' }
])

const search = ref({
  year: null,
  model: null,
  type: null,
  keyword: ''
})

const del = (status, id) => {
  console.log('执行了')
  confirmDia.value.open(status, id)
}

const toDetail = (item) => {
  console.log('传递前', item)
  store.dispatch('setBlogItem', item)
  router.push('/blogdetail')
}

const handlerDelete = (status, id) => {
  console.log('delete', status, id)
  request
    .get(`/user/delete?id=${id}&status=${status}`)
    .then((res) => {
      console.log('获取成功：', res)
      ElNotification.success('操作成功！')
      emit('refresh')
    })
    .catch((err) => {
      if (err.response) {
        console.error(err.message)
        ElNotification({
          title: 'Error',
          message: err.message,
          type: 'error'
        })
      } else {
        ElNotification({
          title: 'Error',
          message: '网络错误',
          type: 'error'
        })
      }
    })
}
const reset = () => {
  search.value = {
    year: null,
    model: null,
    type: null,
    keyword: ''
  }
}

const searchBlog = () => {
  console.log('传递的数据', search.value)

  emit('search', search.value)
}

const toPush = (item) => {
  localStorage.setItem('update-blog', JSON.stringify(item))
  router.push('/publish')
}

const refresh = () => {
  emit('refresh')
  search.value = {
    year: null,
    model: null,
    type: null,
    keyword: ''
  }
}
</script>

<style scoped lang="scss">
$hightFont: #0033ff;
$fontSmall: 12px;
$backLine: rgba(255, 249, 179, 0.297);
$flex: flex;

.inp {
  margin-right: 10px;
  margin-top: 25px;
}

.item {
  height: 100px;
  padding: 10px;
  display: $flex;
}
.btn {
  border: none;
  background: rgba(0, 0, 0, 0);
}

.item:hover {
  background: #eee;
}

.left {
  margin-left: 20px;
  width: 100%;
}
.foot {
  display: $flex;
  font-size: $fontSmall;
  color: #b6b6b6;
  width: 100px;
}
.tag {
  padding: 2px 4px;
  margin-right: 10px;
  border-radius: 2px;
  font-size: $fontSmall;
  width: 25px;
}
.tag1 {
  background: $backLine;
  color: #ff5100;
}
.tag2 {
  background: $backLine;
  color: #ffae00;
}
.tag3 {
  background: $backLine;
  color: #{hightFont};
}
.btn:hover {
  color: #{$hightFont};
  cursor: pointer;
}

.tag:hover {
  cursor: default;
}
</style>
